<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import TnCollapse from '@tuniao/tnui-vue3-uniapp/components/collapse/src/collapse.vue'
import TnCollapseItem from '@tuniao/tnui-vue3-uniapp/components/collapse/src/collapse-item.vue'
import TnSuspendButton from 'tnuiv3p-tn-suspend-button/index.vue'
import type { NavbarRectInfo } from '@tuniao/tnui-vue3-uniapp/components/navbar'
import PageContainer from '@/components/page-container/index.vue'
import system from '@/api/system.js'

// 导航栏的高度
const navbarHeight = ref(0)
const currentCollapse = ref()
const collapseData = ref([])

const getFaq = () => {
  system
    .faq()
    .then((res) => {
      if (res.code == 1) {
        collapseData.value = res.data
      }
    })
    .catch((err) => {
      console.log(err)
    })
}

// 导航栏初始化完毕
const navbarInitFinishHandle = (info: NavbarRectInfo) => {
  navbarHeight.value = info.height
}

onMounted(() => {
  getFaq()
})
</script>

<template>
  <PageContainer :placeholder-bottom="true">
    <TnNavbar
      fixed
      :bottom-shadow="false"
      :placeholder="false"
      @init-finish="navbarInitFinishHandle"
    >
      常见问题
    </TnNavbar>
    <view class="container" :style="{ paddingTop: `${navbarHeight + 10}px` }">
      <view class="collapse-container">
        <TnCollapse v-model="currentCollapse">
          <TnCollapseItem
            v-for="(item, index) in collapseData"
            :key="index"
            :title="item.problem"
          >
            {{ item.answer }}
          </TnCollapseItem>
        </TnCollapse>
      </view>
    </view>

    <TnSuspendButton bg-color="tn-gradient__blue">
      <TnButton only-button open-type="contact">
        <TnIcon name="wechat-fill" color="#fff" size="70" />
      </TnButton>
    </TnSuspendButton>
  </PageContainer>
</template>

<style lang="scss" scoped>
.container {
  background-color: var(--tn-color-gray-light);
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 30rpx 30rpx;

  .collapse-container {
    width: 100%;
    background-color: #fff;
    border-radius: 15rpx;
  }
}

.problem-detail {
  padding: 30rpx;
}
</style>
